<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/font/iconfont.css">
    <script src="js/zepto.min.js"></script>
    <title>Title</title>
    <style>

    </style>
</head>
<body>

<div class="header clearfix">
    <img src="img/logo.png" alt="" id="logo">
    <div class="head_find"></div>
    <div class="head_txt">
        <span>消息</span>
    </div>
</div>

<section id="wrapper">
    <div class="body">
        <div id="banner">
            <ul>
                <li><img src="img/banner1.jpg" alt=""></li>
                <li><img src="img/banner2.jpg" alt=""></li>
                <li><img src="img/banner3.jpg" alt=""></li>
                <li><img src="img/banner4.jpg" alt=""></li>
            </ul>
            <ul id="dot">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="nav">
            <ul class="nav_ul clearfix">
                <li>
                    <img src="img/icon_03.png" alt="">
                    <p>商城返利</p>
                </li>
                <li>
                    <img src="img/icon_06.png" alt="">
                    <p>商城返利</p>
                </li>
                <li>
                    <img src="img/icon_08.png" alt="">
                    <p>商城返利</p>
                </li>
                <li>
                    <img src="img/icon_10.png" alt="">
                    <p>商城返利</p>
                </li>
                <li>
                    <img src="img/icon_12.png" alt="">
                    <p>商城返利</p>
                    <span class="cx">撸羊毛</span>
                </li>
                <li>
                    <img src="img/icon_14.png" alt="">
                    <p>商城返利</p>
                    <span class="cx">9折</span>
                </li>
                <li>
                    <img src="img/icon_16.png" alt="">
                    <p>商城返利</p>
                </li>
                <li>
                    <img src="img/icon_18.png" alt="">
                    <p>商城返利</p>
                </li>
            </ul>
        </div>

        <div class="privilege">
            <ul class="privilege_row row_1 clearfix">
                <li>
                    <img src="img/jd_fanli_icon_03.png" alt="">
                    <span>京东移动端入口</span>
                </li>
                <li>
                    <img src="img/jd_fanli_icon_07.png" alt="">
                    <span>京东微信端入口</span>
                </li>
                <li>
                    <img src="img/jd_fanli_icon_10.png" alt="">
                    <span>京东手机Q端入口</span>
                </li>
            </ul>
            <ul class="privilege_row row_2 clearfix">
                <li>
                    <img src="img/index_qnav_cz.png" alt="">
                </li>
                <li>
                    <img src="img/index_qnav_tb.png" alt="">
                </li>
            </ul>
            <ul class="privilege_row row_3 clearfix">
                <li>

                </li>
                <li></li>
                <li></li>
            </ul>
            <div class="privilege_row row_4 clearfix">
                <div class="row_4_left">
                    <p>优惠爆料-薅羊毛</p>
                    <div>汇集全网白菜价、神价格、手慢无、抢购、秒杀等优惠商品爆料信息</div>
                </div>
                <div class="row_4_right">
                    <ul class="clearfix">
                        <li>
                            <p>白菜汇</p>
                            <span>9.9元白菜爆料总汇</span>
                        </li>
                        <li>
                            <p>白菜汇</p>
                            <span>9.9元白菜爆料总汇</span>
                        </li>
                        <li>
                            <p>白菜汇</p>
                            <span>9.9元白菜爆料总汇</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="list">
            <div class="list_title">
                <span>今日值得买</span>
            </div>
            <ul class="list_body">
                <li class="clearfix">
                    <img src="img/img_03.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>杨山黄桃罐头（425g）1元包邮神价格手慢无（11-10）</p>
                        <span class="list_span">神价格 白菜价</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_06.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>联想（Lenovo）YOGA3 14英寸超极本</p>
                        <span class="list_span">999元包邮</span>
                        <div class="money">
                            <span>￥999 .00</span>
                            <span><b>苏宁易购</b> <i>03-14 00:07</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_08.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>有一个食品神卷</p>
                        <span class="list_span">品美味享健康199-100神卷</span>
                        <div class="money">
                            <span>￥0.00</span>
                            <span><b>京东商城</b> <i>03-14  00:07</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_10.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>三生三世十里套路神卷</p>
                        <span class="list_span">神卷199-120白色情人节 3月14日只限一天</span>
                        <div class="money">
                            <span>￥0.00</span>
                            <span><b>京东商城wap端</b> <i>03-14  01:24</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_12.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>京东全平台抵用券</p>
                        <span class="list_span">领卷</span>
                        <div class="money">
                            <span>￥0.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_14.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>小米红米4x全网通版2GB+16GB磨砂黑移动联通电信4G手机</p>
                        <span class="list_span">京东10点手机抢购总汇</span>
                        <div class="money">
                            <span>￥699.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_16.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>京东 家居日用神卷 199-186元神卷（10点卷已领完，下午3:00还可以在领卷收藏）</p>
                        <span class="list_span">活动爆料</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_18.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>休闲食品点卷</p>
                        <span class="list_span">次优惠券十分抢手，可能存在抢不到的情况</span>
                        <div class="money">
                            <span>￥0.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_20.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>服饰内衣PLUS专享会场神卷299-100</p>
                        <span class="list_span">领点券299-100</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_22.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>【京东超市】【中绿粗粮王】没人红豆谷物浓浆 250ml/盒</p>
                        <span class="list_span">时尚最低，手慢无</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_24.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>促销活动：苏宁易购 海尔超级品牌日</p>
                        <span class="list_span">999减50 1999减200优惠券，可叠加满减</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_26.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>【京东配送】方若 枕头酒店护颈崭新枕头一对装拍二双排磁石枕 单只装</p>
                        <span class="list_span">9.9包邮，京东配送</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_28.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>匠林思佳 网布升降电脑椅</p>
                        <span class="list_span">138元包邮</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_30.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>全民315</p>
                        <span class="list_span">家用电器3000-500</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_32.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>金贵夫人20夹不锈钢晾衣架 晾晒防风袜子架不锈钢原色</p>
                        <span class="list_span">1元</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_34.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>【京东超市】清清风（app）手帕纸 原木纯品 3层10张*30包 标准型超值装</p>
                        <span class="list_span">10.9元一件一件30包，可以凑单单用卷</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_36.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>个人护理小家电小金库优惠券可以和东券、京劵叠加使用，更优惠</p>
                        <span class="list_span">领劵</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_38.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>纸巾买2付1</p>
                        <span class="list_span">买2付1</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_40.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>京东 放风筝，开启春天 玩游戏送券</p>
                        <span class="list_span">玩游戏送券</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <img src="img/img_42.png" alt="" class="pic">
                    <div class="list_bd_tit">
                        <p>荣耀8青春版 全网通标配版（幻夜黑）</p>
                        <span class="list_span">神号上1099元</span>
                        <div class="money">
                            <span>￥1.00</span>
                            <span><b>京东商城</b> <i>03-14  15:59</i></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <div id="pullUp">加载loading...</div>
</section>


<div class="footer">
    <ul class="clearfix">
        <li>
            <i class="iconfont icon-fangzi icon"></i>
            <p>首页</p>
        </li>
        <li>
            <i class="iconfont icon-shangcheng icon"></i>
            <p>商城返利</p>
        </li>
        <li>
            <i class="iconfont icon-youhui icon"></i>
            <p>优惠爆料</p>
        </li>
        <li>
            <i class="iconfont icon-iconfont icon"></i>
            <p>超级返利</p>
        </li>
        <li>
            <i class="iconfont icon-wode icon"></i>
            <p>我的</p>
        </li>
    </ul>
</div>
</body>
<script src="js/iscroll-probe.js"></script>
<script>
    (function (win, doc) {
        //浏览器缩放时
        win.onresize = function () {
            change();
        };
        change();
        function change() {
            var oFs = doc.documentElement.clientWidth / (414 / 20);

            //设置根目录字体大小
            doc.documentElement.style.fontSize = oFs + 'px';
        }
    })(window, document);

   /* document.addEventListener("touchmove",function (ev) {
        ev.preventDefault()
    },{passive:false});

    var body = document.querySelector(".body");
    var oDivPullUp = document.querySelector("#pullUp");

    var myScroll = new IScroll("#wrapper",{
        /!* 设置为3指没滚动一像素都会触发事件 *!/
        probeType:3,
        mouseWheel:true,
        momentum:false
    });


    var iScrollState = 0;

    console.log(myScroll.maxScrollY) ; //最大滚动距离
    myScroll.on("scroll",function () {
        console.log(myScroll.y)
        if(this.y>50){
            iScrollState = 1;
            oDivPullDown.style.display = "block"
        }
     /!*   else if(myScroll.maxScrollY-50>this.y){
            iScrollState = 2;
            oDivPullUp.style.display = "block"
        }*!/
    })
    var count = 1
    myScroll.on("scrollEnd",function () {
        if(iScrollState == 1){
            /!*
             * 执行下拉操作的位置
             * *!/
            /!* for(var i=0;i<3;i++){
             var new_li = document.createElement("li")
             new_li.innerHTML = "新的li:"+count++;
             oUl.appendChild(new_li);
             }*!/

            /!*内容修改刷新*!/
            oDivPullDown.style.display = "none";
            myScroll.refresh();
            iScrollState = 0
        }else if(iScrollState == 2){
            //上拉加载
            /!*      for(var i=0;i<3;i++){
             var new_li = document.createElement("li")
             new_li.innerHTML = "新的liPullUp-->:"+count++;
             oUl.appendChild(new_li);
             }*!/
            oDivPullUp.style.display = "none";
            myScroll.refresh();
            iScrollState = 0

            myScroll.scrollTo(0,0)//设置到顶部
        }
    })*/


    //清除默认事件
    document.addEventListener("touchmove",function (ev) {
        ev.preventDefault();
    },{passive:false});





    //设置dot的样式
    $("#banner").css({
        'overflow':'hidden',
        'position':'relative',

    })
    $("#banner>ul:first-child").css({
        'width':'400%',
        'display':'flex',
        'transition':'1s'
    })
    $("#banner>ul:first-child>li").css({
        'flex-grow':'1'
    });
    $("#banner>ul:first-child>li>img").css({
        'width':'100%'
    });
    $("#dot").css({
        'display':'flex',
        'position':'absolute',
        'left':'7.9rem',
        'bottom': '0.6rem'
    });
    $("#dot>li").css({
        'width': '5px',
        'height':'5px',
        'border':'0.1rem solid  white',
        'border-radius':'50%',
        'margin-left':'0.5rem'
    });
    //滑动效果
    $("#dot>li").eq(0).css({"background":"#fff"});
    var oUl = $("#banner>ul:first-child"),
        width = screen.width,
        length = $("#banner>ul:first-child>li").length,
        index = 0;
    oUl.swipeLeft(function () {
        move();
    });
    oUl.swipeRight(function () {
        index--;
        if(index < 0 ){
            index++;
        }
        oUl.css("transform","translateX(-"+width*index+"px)");
        $("#dot>li").eq(index).css({"background":"#fff"}).siblings().css({"background":"none"});
    });
    setInterval(function () {
        move();
    },3000);
    function move() {
        index++;
        if(index == length){
            index = 0;
        }
        oUl.css("transform","translateX(-"+width*index+"px)");
        $("#dot>li").eq(index).css({"background":"#fff"}).siblings().css({"background":"none"});
    }


</script>
</html>